<template>
  <div>
    <h1>薪资数据预测</h1>
    <el-form :model="form" label-width="120px">
      <el-form-item label="年龄">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
      <el-form-item label="工人阶级">
        <el-select v-model="form.workclass" placeholder="请选择">
            <el-option label="私人" value="Private"></el-option>
            <el-option label="自雇非公司" value="Self-emp-not-inc"></el-option>
            <el-option label="自雇公司" value="Self-emp-inc"></el-option>
            <el-option label="联邦政府" value="Federal-gov"></el-option>
            <el-option label="地方政府" value="Local-gov"></el-option>
            <el-option label="州政府" value="State-gov"></el-option>
            <el-option label="无薪" value="Without-pay"></el-option>
            <el-option label="从未工作过" value="Never-worked"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学历">
        <el-select v-model="form.education" placeholder="请选择">
            <el-option label="学士学位" value="Bachelors"></el-option>
            <el-option label="大学在读" value="Some-college"></el-option>
            <el-option label="高中三年级" value="11th"></el-option>
            <el-option label="高中毕业" value="HS-grad"></el-option>
            <el-option label="职业学校" value="Prof-school"></el-option>
            <el-option label="副学士学位" value="Assoc-acdm"></el-option>
            <el-option label="专业学位" value="Assoc-voc"></el-option>
            <el-option label="高中一年级" value="9th"></el-option>
            <el-option label="初中" value="7th-8th"></el-option>
            <el-option label="高中四年级" value="12th"></el-option>
            <el-option label="硕士学位" value="Masters"></el-option>
            <el-option label="小学" value="1st-4th"></el-option>
            <el-option label="高中二年级" value="10th"></el-option>
            <el-option label="博士学位" value="Doctorate"></el-option>
            <el-option label="五年级或六年级" value="5th-6th"></el-option>
            <el-option label="幼儿园" value="Preschool"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="受教育年限">
        <el-input v-model.number="form.education_num"></el-input>
      </el-form-item>
      <el-form-item label="婚姻情况">
        <el-select v-model="form.marital_status" placeholder="请选择">
            <el-option label="已婚配偶" value="Married-civ-spouse"></el-option>
            <el-option label="离异" value="Divorced"></el-option>
            <el-option label="未婚" value="Never-married"></el-option>
            <el-option label="分居" value="Separated"></el-option>
            <el-option label="丧偶" value="Widowed"></el-option>
            <el-option label="已婚配偶缺席" value="Married-spouse-absent"></el-option>
            <el-option label="未知" value="Married-AF-spouse"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职业">
        <el-select v-model="form.occupation" placeholder="请选择">
            <el-option label="技术支持" value="Tech-support"></el-option>
            <el-option label="工艺维修" value="Craft-repair"></el-option>
            <el-option label="其他服务" value="Other-service"></el-option>
            <el-option label="销售" value="Sales"></el-option>
            <el-option label="行政管理" value="Exec-managerial"></el-option>
            <el-option label="专业教授" value="Prof-specialty"></el-option>
            <el-option label="清洁工" value="Handlers-cleaners"></el-option>
            <el-option label="机器操作检查" value="Machine-op-inspct"></el-option>
            <el-option label="行政文书" value="Adm-clerical"></el-option>
            <el-option label="农业捕捞" value="Farming-fishing"></el-option>
            <el-option label="运输搬运" value="Transport-moving"></el-option>
            <el-option label="私房服务" value="Priv-house-serv"></el-option>
            <el-option label="保护服务" value="Protective-serv"></el-option>
            <el-option label="武装部队" value="Armed-Forces"></el-option>
            <el-option label="搬运员" value="Handlers-cleaners"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关系">
        <el-select v-model="form.relationship" placeholder="请选择">
           <el-option label="妻子" value="Wife"></el-option>
            <el-option label="自己的孩子" value="Own-child"></el-option>
            <el-option label="丈夫" value="Husband"></el-option>
            <el-option label="不属于家族" value="Not-in-family"></el-option>
            <el-option label="其他关系" value="Other-relative"></el-option>
            <el-option label="未婚" value="Unmarried"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="种族">
        <el-select v-model="form.race" placeholder="请选择">
           <el-option label="白人" value="White"></el-option>
            <el-option label="亚洲太平洋岛民" value="Asian-Pac-Islander"></el-option>
            <el-option label="美国印第安爱斯基摩人" value="Amer-Indian-Eskimo"></el-option>
            <el-option label="其他" value="Other"></el-option>
            <el-option label="黑人" value="Black"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择">
          <el-option label="女" value="Female"></el-option>
          <el-option label="男" value="Male"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资本收益">
        <el-input v-model.number="form.capital_gain"></el-input>
      </el-form-item>
      <el-form-item label="资本损失">
        <el-input v-model.number="form.capital_loss"></el-input>
      </el-form-item>
      <el-form-item label="每周工作小时数">
        <el-input v-model.number="form.hours_per_week"></el-input>
      </el-form-item>
      <el-form-item label="所属地">
        <el-select v-model="form.native_country" placeholder="请选择">
            <el-option label="美国" value="United-States"></el-option>
            <el-option label="柬埔寨" value="Cambodia"></el-option>
            <el-option label="英国" value="England"></el-option>
            <el-option label="波多黎各" value="Puerto-Rico"></el-option>
            <el-option label="加拿大" value="Canada"></el-option>
            <el-option label="德国" value="Germany"></el-option>
            <el-option label="美国境外(关岛USVI等)" value="Outlying-US(Guam-USVI-etc)"></el-option>
            <el-option label="印度" value="India"></el-option>
            <el-option label="日本" value="Japan"></el-option>
            <el-option label="希腊" value="Greece"></el-option>
            <el-option label="南部" value="South"></el-option>
            <el-option label="中国" value="China"></el-option>
            <el-option label="古巴" value="Cuba"></el-option>
            <el-option label="伊朗" value="Iran"></el-option>
            <el-option label="洪都拉斯" value="Honduras"></el-option>
            <el-option label="菲律宾" value="Philippines"></el-option>
            <el-option label="意大利" value="Italy"></el-option>
            <el-option label="波兰" value="Poland"></el-option>
            <el-option label="牙买加" value="Jamaica"></el-option>
            <el-option label="越南" value="Vietnam"></el-option>
            <el-option label="墨西哥" value="Mexico"></el-option>
            <el-option label="葡萄牙" value="Portugal"></el-option>
            <el-option label="爱尔兰" value="Ireland"></el-option>
            <el-option label="法国" value="France"></el-option>
            <el-option label="多米尼加共和国" value="Dominican-Republic"></el-option>
            <el-option label="老挝" value="Laos"></el-option>
            <el-option label="厄瓜多尔" value="Ecuador"></el-option>
            <el-option label="台湾" value="Taiwan"></el-option>
            <el-option label="海地" value="Haiti"></el-option>
            <el-option label="哥伦比亚" value="Columbia"></el-option>
            <el-option label="匈牙利" value="Hungary"></el-option>
            <el-option label="危地马拉" value="Guatemala"></el-option>
            <el-option label="尼加拉瓜" value="Nicaragua"></el-option>
            <el-option label="苏格兰" value="Scotland"></el-option>
            <el-option label="泰国" value="Thailand"></el-option>
            <el-option label="南斯拉夫" value="Yugoslavia"></el-option>
            <el-option label="萨尔瓦多" value="El-Salvador"></el-option>
            <el-option label="特立尼达和多巴哥" value="Trinadad&Tobago"></el-option>
            <el-option label="秘鲁" value="Peru"></el-option>
            <el-option label="香港" value="Hong"></el-option>
            <el-option label="荷兰荷兰" value="Holand-Netherlands"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="模型选择">
        <el-select v-model="form.mode" placeholder="请选择">
          <el-option label="逻辑回归" value="lg"></el-option>
          <el-option label="决策树" value="dt"></el-option>
          <el-option label="KNN" value="knn"></el-option>
          <el-option label="贝叶斯" value="by"></el-option>
          <el-option label="支持向量机" value="svn"></el-option>
          <el-option label="随机森林" value="rf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="predict">预测</el-button>
      </el-form-item>
    </el-form>

      <el-form-item>
        <el-button type="primary" @click="predict">预测</el-button>
      </el-form-item>

    <div>
      <span>预测结果</span>
      <span v-if="res === 1" style="color: red">{{ this.predictionResult }}</span>
      <span v-else-if="res === 0" style="color: blue">{{ this.predictionResult }}</span>
    </div>
  </div>
</template>

<script>
import { EventBus } from '../EventBus'; // 确保路径正确

export default {
  data() {
    return {
      form: {
        sex: '',
        age: 0,
        workclass: '',
        fnlwgt: 18894,
        education: '',
        education_num: 0,
        marital_status: '',
        occupation: '',
        relationship: '',
        race: '',
        capital_gain: 0,
        capital_loss: 0,
        hours_per_week: 0,
        native_country: '',
        mode: ''
      },
      dialogVisible: false,
      predictionResult: '',
      res: ''
    };
  },
  methods: {
    predict() {
      console.log(this.form)
      this.$http({
        method: 'post',
        url: '/salarypredict',
        data: this.form
      })
        .then(response => {
          if (response.data.code == 200){
            this.res = response.data.data
            this.predictionResult = response.data.msg
          }
        })
        .catch(error => {
          console.log(error.message)
        })
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>